<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="assets/ico/favicon32.ico" type="image/x-icon" />
		<title>错误</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
		}

		body {
			position: relative;
			width: 100%;
			height: 100%;

		}

		.error {
			width: 100%;
			height: 100%;
			position: relative;
			top: 0;
			left: 0;
			background: url("./assets/img/404.png") no-repeat;
			background-size: 100%;
		}

		.error-img {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 600px;
			height: 300px;
			color: #8c8080;
			font-size: 16px;
			/* margin: 0 auto; */
			text-align: center;
		}

		.error-img img {
			width: 600px;
			height: 182px;
		}

		.error-img p {
			margin-top: 30px;
		}

		@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");

		:root {
			--lower: 100;
			--upper: 700;
		}

		.error-img div {
			font-family: 'Roboto Mono', monospace;
			font-size: 30px;
			text-align: center;
			position: absolute;
			top: 85%;
			left: 50%;
			white-space: nowrap;
			-webkit-transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
			transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
			font-variation-settings: 'wght'var(--lower);
			margin: 0;
		}

		.error-img div span {
			color: hsla(180, 100%, 90%, var(--alpha-l));
			-webkit-animation: rise 2.25s infinite ease-in-out;
			animation: rise 2.25s infinite ease-in-out;
			-webkit-animation-delay: calc((var(--index) - 6) * 0.225s);
			animation-delay: calc((var(--index) - 6) * 0.225s);
			display: inline-block;
		}

		@-webkit-keyframes rise {
			50% {
				font-variation-settings: 'wght'var(--upper);
				color: hsla(180, 100%, 100%, var(--alpha-u));
				-webkit-transform: translate(0, -15%);
				transform: translate(0, -15%);
			}
		}

		@keyframes rise {
			50% {
				font-variation-settings: 'wght'var(--upper);
				color: hsla(180, 100%, 100%, var(--alpha-u));
				-webkit-transform: translate(0, -15%);
				transform: translate(0, -15%);
			}
		}
	</style>

	<body>
		<div class="error">
			<div class="error-img">
				<img src="./assets/img/error.png" alt="">
				<div style="--x: 6; --y: -6;">
					
				</div>

				<div style="--x: 3; --y: -3;">
					
				</div>

				<div>
					
				</div>
			</div>
		</div>
	</body>
	<script src="lib/jquery/jquery-3.0.0.min.js"></script>
	<script src="common/common.js"></script>
	<script>
		$(function() {
			var code = getUrlParam("code");
			var msg = decodeURIComponent(getUrlParam("msg"));
			if (!code || !msg) {
				var chars = ("出错了~").split("");
			} else {
				var chars = (code + msg).split("");
			}
			for (var i = 0; i < chars.length; i++) {
				$(".error-img>div:nth-of-type(1)").append('<span style="--index: '+i+'; --alpha-l: 0.125; --alpha-u: 0.25;">'+chars[i]+'</span>');
				$(".error-img>div:nth-of-type(2)").append('<span style="--index: '+i+'; --alpha-l: 0.25; --alpha-u: 0.5;">'+chars[i]+'</span>');
				$(".error-img>div:nth-of-type(3)").append('<span style="--index: '+i+'; --alpha-l: 0.5; --alpha-u: 1;">'+chars[i]+'</span>');
			}

		});
	</script>
</html>
